<template>
  <div>
      <!-- 表格 -->
      <div class="unit-form uni-form-head">
          <span class="uni-form-td uni-form-td-sort">排序</span>
          <span class="uni-form-td uni-form-td-name">报名项</span>
          <span class="uni-form-td uni-form-td-set">其他信息</span>
          <span class="uni-form-td uni-form-td-null">必填</span>
          <span class="uni-form-td uni-form-td-handle">操作</span>
      </div>
      <!-- 固定項 姓名手机号 -->
      <div class="unit-form uni-form-content" v-for="(item,key) in form" :key="key" v-if="key < 2">
            <span class="uni-form-td uni-form-td-sort">
                <div class="unit-form-unit-icon"><i class="el-icon-rank " :style="key > 1 ? 'opacity:1' : 'opacity:0'"></i></div>
            </span>
            <span class="uni-form-td uni-form-td-name">{{item.name}}
            </span>
            <span class="uni-form-td uni-form-td-set">
                <el-input type="text" :placeholder="'请输入'+item.name" size="small" v-if="item.type == 'text'"></el-input>
                <el-input type="number" :placeholder="'请输入'+item.name" size="small" v-if="item.type == 'number'"></el-input>
            </span>
            <span class="uni-form-td uni-form-td-null">
                <el-checkbox v-model="item.not_null" :disabled="key < 2 ? true : false" ></el-checkbox>
            </span>
            <span class="uni-form-td uni-form-td-handle">
                <el-button circle size="mini" icon="el-icon-delete" type="danger" @click="deleteForm(key)" :disabled="key < 2 ? true : false"></el-button>
            </span>
      </div>
      <!-- 可拖动项 -->
      <draggable v-model="form" @update="datadragEnd" :options = "{animation:200}" v-if="is_edit !== false">
          <transition-group>
              <div class="unit-form uni-form-content" v-for="(item,key) in form" :key="key" v-if="key > 1">
                <span class="uni-form-td uni-form-td-sort">
                    <div class="unit-form-unit-icon"><i class="el-icon-rank " :style="key > 1 ? 'opacity:1' : 'opacity:0'"></i></div>
                </span>
                <span class="uni-form-td uni-form-td-name">
                    <div>
                        <el-input v-model="item.name" size="small" v-if="item.is_diy"></el-input>
                        <span v-else>{{item.name}}</span>
                    </div>
                    <div v-if="item.type == 'date' ">
                        <span style="margin-right:10px;">限定日期</span>
                        <el-switch v-model="item.limit" active-color="#8a70c6" inactive-color="#e1e1e1"  style="margin-right:10px;" @change="changeDateLimit(key)"></el-switch>
                    </div>
                </span>
                <span class="uni-form-td uni-form-td-set">
                    <!-- 文本框 -->
                    <el-input type="text" :placeholder="'请输入'+item.name" size="small" v-if="item.type == 'text'"></el-input>
                    <!-- 数字框 -->
                    <el-input type="number" :placeholder="'请输入'+item.name" size="small" v-if="item.type == 'number'"></el-input>
                    <!-- 多行文本 -->
                    <el-input type="textarea" :placeholder="'请输入'+item.name" size="small" v-if="item.type == 'textarea'"></el-input>
                    <!-- select和radio组件 -->
                    <div class="select-option" v-if="item.type == 'select' || item.type == 'radio' && item.limit === false">
                        <el-input class="select-option-input" placeholder="请输入选项名" :disabled="items.disable"  size="small" v-for="(items,keys) in item.data" :key="keys" v-model="items.label">
                            <template slot="append">
                                <div class="select-option-delete" @click="deleteSelectOption(key,keys)"><i class="el-icon-close"></i></div>
                            </template>
                        </el-input>
                        <el-button size="small" icon="el-icon-plus" @click="addSelectOption(key)"></el-button>
                    </div>
                    <!-- 性别 -->
                    <div class="select-option" v-if="item.type == 'radio' && item.limit !== false">
                        <el-radio-group v-model="item.limit" @change="changeLimit">
                            <el-radio v-for="(items,keys) in item.data" :key="keys" :label="items.value">{{items.label}}</el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 日期 -->
                    <div class="select-option" v-if="item.type == 'date'">
                        <el-date-picker  type="datetime" placeholder="选择日期时间" size="small"></el-date-picker>
                        <div class="option-date-limit">
                            <el-date-picker :disabled="!item.limit" @change="changeLimit" type="datetime" placeholder="选择日期时间" size="small" v-model="item.data[0]" value-format="timestamp"></el-date-picker>
                            <span style="margin:0 10px;">至</span>
                            <el-date-picker :disabled="!item.limit" @change="changeLimit" type="datetime" placeholder="选择日期时间" size="small" v-model="item.data[1]"  value-format="timestamp"></el-date-picker>
                            <!-- <el-date-picker v-if="item.limit" size="small" v-model="item.data" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp"></el-date-picker> -->
                        </div>
                    </div>
                    <!-- 图片 -->
                    <div class="unit-image-demo"  v-if="item.type == 'image'">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </span>
                <span class="uni-form-td uni-form-td-null">
                    <el-checkbox v-model="item.not_null" :disabled="key < 2 ? true : false" @change="changeNull($event,key)"></el-checkbox>
                </span>
                <span class="uni-form-td uni-form-td-handle">
                    <el-button circle size="mini" icon="el-icon-delete" type="danger" @click="deleteForm(key)" :disabled="key < 2 ? true : false"></el-button>
                </span>
             </div>
          </transition-group>   
      </draggable>
      <!-- 不可编辑时不可拖动 -->
       <div class="unit-form uni-form-content" v-for="(item,key) in form" :key="key" v-if="key > 1 && is_edit === false">
        <span class="uni-form-td uni-form-td-sort">
            <div class="unit-form-unit-icon"><i class="el-icon-rank " :style="key > 1 ? 'opacity:1' : 'opacity:0'"></i></div>
        </span>
        <span class="uni-form-td uni-form-td-name">
            <div>
                <el-input v-model="item.name" size="small" v-if="item.is_diy"></el-input>
                <span v-else>{{item.name}}</span>
            </div>
            <div v-if="item.type == 'date' ">
                <span style="margin-right:10px;">限定日期</span>
                <el-switch v-model="item.limit" active-color="#8a70c6" inactive-color="#e1e1e1"  style="margin-right:10px;" @change="changeDateLimit(key)"></el-switch>
            </div>
        </span>
        <span class="uni-form-td uni-form-td-set">
            <!-- 文本框 -->
            <el-input type="text" :placeholder="'请输入'+item.name" size="small" v-if="item.type == 'text'"></el-input>
            <!-- 数字框 -->
            <el-input type="number" :placeholder="'请输入'+item.name" size="small" v-if="item.type == 'number'"></el-input>
            <!-- 多行文本 -->
            <el-input type="textarea" :placeholder="'请输入'+item.name" size="small" v-if="item.type == 'textarea'"></el-input>
            <!-- select和radio组件 -->
            <div class="select-option" v-if="item.type == 'select' || item.type == 'radio' && item.limit === false">
                <el-input class="select-option-input" placeholder="请输入选项名"  size="small" v-for="(items,keys) in item.data" :key="keys" v-model="items.label">
                    <template slot="append">
                        <div class="select-option-delete" @click="deleteSelectOption(key,keys)"><i class="el-icon-close"></i></div>
                    </template>
                </el-input>
                <el-button size="small" icon="el-icon-plus" @click="addSelectOption(key)"></el-button>
            </div>
            <!-- 性别 -->
            <div class="select-option" v-if="item.type == 'radio' && item.limit !== false">
                <el-radio-group v-model="item.limit" @change="changeLimit">
                    <el-radio v-for="(items,keys) in item.data" :key="keys" :label="items.value">{{items.label}}</el-radio>
                </el-radio-group>
            </div>
            <!-- 日期 -->
            <div class="select-option" v-if="item.type == 'date'">
                <el-date-picker  type="datetime" placeholder="选择日期时间" size="small"></el-date-picker>
                <div class="option-date-limit">
                    <el-date-picker :disabled="!item.limit" @change="changeLimit" type="datetime" placeholder="选择日期时间" size="small" v-model="item.data[0]" value-format="timestamp"></el-date-picker>
                    <span style="margin:0 10px;">至</span>
                    <el-date-picker :disabled="!item.limit" @change="changeLimit" type="datetime" placeholder="选择日期时间" size="small" v-model="item.data[1]"  value-format="timestamp"></el-date-picker>
                    <!-- <el-date-picker v-if="item.limit" size="small" v-model="item.data" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp"></el-date-picker> -->
                </div>
            </div>
            <!-- 图片 -->
            <div class="unit-image-demo"  v-if="item.type == 'image'">
                <i class="el-icon-picture-outline"></i>
            </div>
        </span>
        <span class="uni-form-td uni-form-td-null">
            <el-checkbox v-model="item.not_null" :disabled="key < 2 ? true : false" @change="changeNull($event,key)"></el-checkbox>
        </span>
        <span class="uni-form-td uni-form-td-handle">
            <el-button circle size="mini" icon="el-icon-delete" type="danger" @click="deleteForm(key)" :disabled="key < 2 ? true : false"></el-button>
        </span>
        </div>
      <!-- 可选项 -->
      <div class="unit-form-options" :style="option_show ? 'height:220px' : 'height:0;border-color:transparent'">
          <div class="uni-form-options-head">
              <i class="el-icon-close" @click="showOption()" ></i>
          </div>
          <div class="unit-form-option-body">
              <div>常用表单项</div>
              <div class="unit-form-option-lists">
                  <span v-for="(item,key) in normal_option" :key="key" :class="checkInArr(item.name) ? 'unit-form-op' : ''" @click="selectOption(item,key)">{{item.name}}</span>
              </div>
              <div style="margin-top:10px;">自定义表单项</div>
              <div class="unit-form-option-lists">
                  <span v-for="(item,key) in my_option" :key="key"  @click="selectOption(item,key)">{{item.name}}</span>
              </div>
          </div>
      </div>
      <!-- 按钮 -->
      <div class="unit-form-btns" v-if="!option_show">
          <el-button icon="el-icon-plus" size="mini" class="com-btn" @click="showOption()">新增选项</el-button>
          <el-button icon="el-icon-view" size="mini" type="warning" @click="formView()">预览</el-button>
      </div>
      <!-- 预览 -->
      <el-dialog :visible.sync="form_view" width="400px" title="表单预览">
          <form-view :form="form"></form-view>
      </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import formView from './form-view.vue';

export default {
    props : {form_data:{} , is_edit:{}},
    components : { draggable , formView},
    data(){
        return {
            form : [],
            option_show : false,
            normal_option : [],
            my_option : [],
            form_view : false
        }
    },
    mounted(){
        //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        }
        this.normal_option = this.setNormalOption();
        this.my_option = this.setMyOption();
        this.form = this.form_data;
    },
    methods:{
        //改变必填
        changeNull(e,key){
            this.$emit('notnull',{data:e,key:key});
        },
        //表单预览
        formView(){
            this.form_view = true;
        },
        changeLimit(){
            this.$emit('update',JSON.parse(JSON.stringify(this.form)));
        },
        //更改日期限制
        changeDateLimit(key){
            this.form[key].data = [];
            this.$emit('update',JSON.parse(JSON.stringify(this.form)));
        },
        //删除select中的option
        deleteSelectOption(key,keys){
            if(this.form[key].data.length == 1)return this.toast(0,'最后一项无法删除');
            this.form[key].data.splice(keys,1);
        },
        //添加select中的option
        addSelectOption(key){
            var len = this.form[key].data.len;
            this.form[key].data.push({value:len , label :'新选项'});
        },
        //拖动回调函数
        datadragEnd(evt){
            this.$emit('sort',{new_index : evt.newIndex , old_index : evt.oldIndex});
        },
        //选择option
        selectOption(data,key){
            if(this.checkInArr(data.name) && data.is_diy == false)return false;
            if(data.bind) {
                var temp_data = [];
                for(var i in this.normal_option){
                    if(this.normal_option[i].bind == data.bind && key != i) {
                        if(key > i) {
                            this.form.push(JSON.parse(JSON.stringify(this.normal_option[i])));
                            this.form.push(JSON.parse(JSON.stringify(data)));
                        } else {
                            this.form.push(JSON.parse(JSON.stringify(data)));
                            this.form.push(JSON.parse(JSON.stringify(this.normal_option[i])));
                        }
                    }
                }
            } else {
                this.form.push(JSON.parse(JSON.stringify(data)));
            }
            
        },
        //删除表单单项
        deleteForm(key){
            var data = JSON.parse(JSON.stringify(this.form[key]));
            var index = -1;
            
            var name = this.form[key].name;
            this.$confirm('确定删除【'+name+'】?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.form.splice(key,1);
                if(data.bind) {
                    for(var i in this.form){
                        if(this.form[i].bind == data.bind) {
                            this.form.splice(i,1);
                        }
                    }
                }
            }).catch(() => {     
            });
        },
        //显示option
        showOption(){
            this.option_show = !this.option_show;
        },
        //设置常用项
        setNormalOption(){
            return [
                {name : '姓名',is_diy:false,not_null:true,limit:false,select:false,type:'text',data:[],is_diy: false,bind : false},
                {name : '手机号',is_diy:false,not_null:true,limit:false,select:false,type:'number',data:[],is_diy: false,bind : false},
                {name : '证件类型',is_diy:false,not_null:true,limit:false,select:true,type:'select',data:[
                    {value : 1 , label : '身份证',disable:true}
                ],is_diy: false,bind : 1},
                {name : '证件号',is_diy:false,not_null:true,limit:false,select:false,type:'text',data:[],is_diy: false,bind : 1},
                {name : '生日',is_diy:false,not_null:true,limit:false,select:false,type:'date',data:[],is_diy: false,bind : false},
                {name : '性别',is_diy:false,not_null:true,limit:0,select:false,type:'radio',data:[
                    {value : 0 , label : '不限定'},{value : 1 , label : '限定男'},{value : 2 , label : '限定女'}
                ],is_diy: false,bind : false},
                {name : '血型',is_diy:false,not_null:true,limit:false,select:false,type:'select',data:[
                    {value : 1 , label : 'A'},{value : 1 , label : 'B'},{value : 1 , label : 'AB'},
                    {value : 1 , label : 'O'},{value : 1 , label : '其他'}
                ],is_diy: false,bind : false},
                {name : '服装尺码',is_diy:false,not_null:true,limit:false,select:false,type:'select',data:[
                    {value : 1 , label : 'XS'},{value : 1 , label : 'S'},{value : 1 , label : 'M'},
                    {value : 1 , label : 'L'},{value : 1 , label : 'XL'},{value : 1 , label : 'XXL'},{value : 1 , label : 'XXXL'},{value : 1 , label : 'XXXXL'}
                ],is_diy: false,bind : false},
                {name : '鞋子尺码',is_diy:false,not_null:true,limit:false,select:false,type:'select',data:[
                    {value : 1 , label : '35'},{value : 1 , label : '36'},{value : 1 , label : '37'},
                    {value : 1 , label : '38'},{value : 1 , label : '39'},{value : 1 , label : '40'},{value : 1 , label : '41'},{value : 1 , label : '42'}
                    ,{value : 1 , label : '43'},{value : 1 , label : '44'},{value : 1 , label : '45'},{value : 1 , label : '46'}
                ],is_diy: false,bind : false},
                {name : '邮箱',is_diy:false,not_null:true,limit:false,select:false,type:'text',data:[],is_diy: false,bind : false},
                {name : '跑龄',is_diy:false,not_null:true,limit:false,select:false,type:'number',data:[],is_diy: false,bind : false},
                {name : '国籍',is_diy:false,not_null:true,limit:false,select:false,type:'text',data:[],is_diy: false,bind : false},
                {name : '城市',is_diy:false,not_null:true,limit:false,select:false,type:'text',data:[],is_diy: false,bind : false},
                {name : '紧急联系人',is_diy:false,not_null:true,limit:false,select:false,type:'text',data:[],is_diy: false,bind : 2},
                {name : '紧急联系方式',is_diy:false,not_null:true,limit:false,select:false,type:'number',data:[],is_diy: false,bind : 2},
            ];
        },
        //设置自定义项
        setMyOption(){
            return [
                {name : '单行文本',is_diy:false,not_null:true,limit:false,select:false,type:'text',data:[],is_diy: true,bind : false},
                {name : '多行文本',is_diy:false,not_null:true,limit:false,select:false,type:'textarea',data:[],is_diy: true,bind : false},
                {name : '数字文本',is_diy:false,not_null:true,limit:false,select:false,type:'number',data:[],is_diy: true,bind : false},
                {name : '日期选择',is_diy:false,not_null:true,limit:false,select:false,type:'date',data:[],is_diy: true,bind : false},
                {name : '下拉框',is_diy:false,not_null:true,limit:false,select:false,type:'select',data:[
                    {value : 0 , label : '新选项'}
                ],is_diy: true,bind : false},
                {name : '图片',is_diy:false,not_null:true,limit:false,select:false,type:'image',data:[],is_diy: true,bind : false},
                
            ];
        },
        //检测是否在数组中
        checkInArr(str){
            for(var i in this.form){
                if(this.form[i].name == str)return true;
            }
            return false;
        },
    },
    watch:{
        form_data(){
            this.form = JSON.parse(JSON.stringify(this.form_data));
        },
        form:{
            handler(v,o) {
                // for(var i in this.form) {
                //     this.form_data[i] = this.form[i];
                // } 
                this.$emit('change',this.form);
            },
            deep:true
        }
    }
}
</script>

<style>
@import url('../../assets/css/unit/form.css');
</style>